import React, { useState } from 'react';

const VolumeControl: React.FC = () => {
  const [volumeLevel, setVolumeLevel] = useState<number>(0);

  const changeVolumeLevel = () => {
    const randomValue = Math.floor(Math.random() * 11); // 生成0到10之间的随机整数
    const newVolumeLevel = volumeLevel + randomValue;

    if (newVolumeLevel >= 100) {
      setVolumeLevel(0);
    } else {
      setVolumeLevel(newVolumeLevel);
    }
  };

  return (
    <div>
      <h2>Current Volume Level: {volumeLevel}%</h2>
      <button onClick={changeVolumeLevel}>Change</button>
    </div>
  );
};

export default VolumeControl;
